import React from 'react'
import MainTitle from '../../../components/MainTitle'
import './AdminManage.scss'
import { UserOutlined } from '@ant-design/icons';
import { useState } from 'react';
import request from '../../../utils/request'
import { useEffect, useCallback } from 'react';
import { Form, Input, Button, Radio, Table, Tag, Popconfirm, message } from 'antd';
export default function AdminManage() {
    const [adminInfo, setAdimInfo] = useState([])
    const [adminlist, setAdimList] = useState([])
    const [superAdminInfo, setSuperAdimInfo] = useState([])

    const [totalAdmin, setTotalAdmin] = useState(0)
    //管理员数量
    const getAdminInfo = useCallback(async function () {
        const { data } = await request.get('/user/getAdminTableData')
        //管理员总数
        setTotalAdmin(data.data.total)
        let res = data.data.admins
        //管理员列表
        setAdimList(data.data.admins)
        //普通管理员
        setAdimInfo(res.filter((item) => {
            return item.role == 'admin'
        }))
        //超级管理员
        setSuperAdimInfo(res.filter((item) => {
            return item.role == "superAdmin"
        }))

    }, [])
    useEffect(() => {
        getAdminInfo()
    }, [])
    const [value, setValue] = React.useState('');

    //表格内容
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',

        },
        {
            title: '工号',
            dataIndex: 'account',

        },
        {
            title: '手机号',
            dataIndex: 'phone',

        },
        {
            title: '身份',
            // dataIndex: 'role',
            key: 'role',
            render: (row) => {
                return (
                    <>
                        <Tag color={row.role == 'admin' ? 'blue' : 'red'} key={row.createdAt}>
                            {row.role.toUpperCase()}
                        </Tag>
                    </>
                );

            }
        },
        {
            title: '管理宿舍楼',
            key: 'id',
            // dataIndex: '',

            render: (row) => {
                return (

                    <>
                        {
                            row.buildings.length == 0 ? <span style={{ color: '#999' }}>所有宿舍</span> : row.buildings.map((item) => {
                                return <span key={item.createdAt} style={{ marginRight: '10px' }}>{item.name}</span>
                            })

                        }

                    </>
                );

            }
        },
    ];
    const [form] = Form.useForm();
    //注册管理员
    const onFinish = useCallback(async (values) => {
        const { data } = await request.post('/user/addAdmin', {
            ...values
        })
        if (data.success === true) {
            message.success('添加管理员成功');
            getAdminInfo()
            message.success('管理员数据更新成功')
        }
        form.resetFields();
    }, []);
    //失败
    const onFinishFailed = useCallback((errorInfo) => {
        message.error('信息未全，请填写信息');

    }, [])
        ;

    return (
        <div id='AdminManage'>
            <MainTitle>添加管理员</MainTitle>
            <div className='top-wrapper' style={{
                marginTop: 40,
                display: 'flex',
            }}>
                <div className='card left'>
                    <h2>
                        总数：{totalAdmin}
                    </h2>
                    <div >
                        <div className="admin content-wrapper">
                            <UserOutlined />
                            普通管理员: {adminInfo.length}
                        </div> <div className="superAdmin content-wrapper">
                            <UserOutlined />
                            超级管理员: {superAdminInfo.length}
                        </div></div>

                </div>
                <div className='card right'>
                    <Form
                        form={form}
                        name="basic"
                        layout='vertical'
                        // validateTrigger='onSubmit'
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        autoComplete="off"
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                    >
                        <Form.Item
                            label="管理员名"
                            name="name"
                            rules={[
                                {
                                    required: true,
                                    message: '请填写管理员名 !',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="学工号"
                            name="account"
                            rules={[
                                {
                                    required: true,
                                    message: '请填写学工号 !',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="手机号"
                            name="phone"
                            rules={[
                                {
                                    required: true,
                                    message: '请填写手机号 !',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '请填写密码 !',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>
                        <Form.Item
                            label="选择身份"
                            name="role"
                            labelCol={{
                                span: 3,
                            }}
                            rules={[
                                {
                                    required: true,
                                    message: '',
                                },
                            ]}
                        >
                            <Radio.Group value={value}>
                                <Radio value={'admin'}>普通管理员</Radio>
                                <Radio value={'superAdmin'}>超级管理员</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >

                            <Button type="primary" htmlType="submit" shape='circle' size='large'>
                                +
                            </Button>
                        </Form.Item>
                    </Form>

                </div>
            </div>
            <MainTitle>已有的管理员列表</MainTitle>
            <div className='bottom-wrapper'>
                <Table rowKey="id" dataSource={adminlist} columns={columns} pagination={false} />
            </div>


        </div>
    )
}